<template>
  <div class="add_address_wrapper">
    <add-header :headTitle="headTitle"></add-header>
    <div class="content">
      <div class="formbloack username">
        <div class="label_wrap">联系人</div>
        <div class="input_group_wrap">
          <div class="input_wrap"><input v-model="name" placeholder="姓名" maxlength="20"></div>
          <div class="input_wrap bottom spans">
            <span class="form_span" @click="chooseSex(1)" :class="{selected: sex == 1}">先生</span>
            <span class="form_span" @click="chooseSex(2)" :class="{selected: sex == 2}">女士</span>
          </div>
        </div>
      </div>
      <div class="formbloack phone">
        <div class="label_wrap">电话</div>
        <div class="input_group_wrap rightbtn">
          <div class="input_wrap"><input v-model="phone" placeholder="手机号码" type="tel" maxlength="20"></div>
        </div>
      </div>
      <div class="formbloack address">
        <div class="label_wrap_tao">
          <p :class="{add_mode_margin: searchAddress}">地址</p>
          <p>门牌号</p>
        </div>
        <div class="input_group_wrap">
          <router-link to='/profile/address/add/search' class="link">
            <div class="input_wrap top">
              <input placeholder="小区/写字楼/学校等" readonly="readonly" :value="searchAddress ? searchAddress.name : '小区/写字楼/学校等'">
              <span class="iconfont arrow">&#xe63c;</span>
            </div>
            <div class="edit_mode_detail" v-if="searchAddress">{{searchAddress.address}}</div>
          </router-link>
          <div class="input_wrap bottom">
            <textarea v-model="address_detail" rows="2" placeholder="10号楼5层501室222" maxlength="100" class="paiNun"></textarea>
            <span class="iconfont arrow">&#xe60e;</span>
          </div>
        </div>
      </div>
      <div class="formbloack tags">
        <div class="label_wrap">标签</div>
        <div class="input_wrap spans">
          <span class="form_span" @click="chooseTag('家')" :class="{selected: tag_type == 2}">家</span>
          <span class="form_span" @click="chooseTag('学校')" :class="{selected: tag_type == 3}">学校</span>
          <span class="form_span" @click="chooseTag('公司')" :class="{selected: tag_type == 4}">公司</span>
        </div>
      </div>
    </div>
    <div class="form_button_wrap">
      <button class="form_button" @click="addAddress">确定</button>
    </div>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import {mapState, mapMutations} from 'vuex'
import AddHeader from '@/components/header/Header'
export default {
  name: 'Add',
  data () {
    return {
      headTitle: '添加地址',
      name: null, // 姓名
      sex: 1, // 性别
      phone: null, // 电话
      address_detail: null, // 详细地址
      tag: '', // 备注
      tag_type: 1, // 备注类型
      phone_bk: false, // 是否选择备注电话
      anntherPhoneNumber: '', // 备注电话
      showAlert: false, // 弹出框
      alertText: null, // 弹出框信息
      poi_type: 0 // 地址类型
    }
  },
  components: {
    AddHeader
  },
  computed: {
    ...mapState(['searchAddress', 'geohash', 'userInfo'])
  },
  methods: {
    ...mapMutations(['CONFIRM_ADDRESS']),

    // 选择性别
    chooseSex (sex) {
      this.sex = sex
    },
    // 选择标签
    chooseTag (tagText) {
      this.tag = tagText
      if (tagText == '家') { // eslint-disable-line
        this.tag_type = 2
      } else if (tagText == '学校') { // eslint-disable-line
        this.tag_type = 3
      } else if (tagText == '公司') { // eslint-disable-line
        this.tag_type = 4
      }
    },
    // 保存地址信息
    addAddress () {
      if (!(this.userInfo && this.userInfo.user_id)) {
        Dialog.alert({
          width: '70%',
          message: '请先登录'
        })
      } else if (!this.name) {
        Dialog.alert({
          width: '70%',
          message: '请输入联系人'
        })
      } else if (!this.phone) {
        Dialog.alert({
          width: '70%',
          message: '请输入正确的手机号码'
        })
      } else if (!this.searchAddress) {
        Dialog.alert({
          width: '70%',
          message: '请选择地址'
        })
      } else if (!this.address_detail) {
        Dialog.alert({
          width: '70%',
          message: '请输入详细地址'
        })
      }
      this.$api.home.postAddAddress(this.userInfo.user_id, this.searchAddress.name + this.searchAddress.address, this.address_detail, this.geohash, this.name, this.phone, this.anntherPhoneNumber, 0, this.sex, this.tag, this.tag_type).then(res => {
        // 保存成功返回上一页，否则弹出提示框
        if (res.data.message) {
          Dialog.alert({
            width: '70%',
            message: res.data.message
          })
        } else {
          console.log(res.data)
          this.CONFIRM_ADDRESS(1)
          this.$router.go(-1)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .add_address_wrapper
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background-color: #f2f2f2
    z-index: 102
    padding-top .88rem
    .content
      padding-left: .3rem
      background: #fff
      .formbloack
        background-color: #fff
        border-bottom: .01rem solid #f5f5f5
        display: flex
        &:first-child
          border-top: .01rem solid #f5f5f5
        .label_wrap
          flex-basis: 1.3rem
          padding: .28rem 0
          font-size: .3rem
          line-height: .3rem
          color: #333
          font-weight: 700
        .input_group_wrap
          flex: 1
          .input_wrap
            flex: 1 1 0
            padding: .28rem 0
            display: flex
            align-items: center
            &.bottom
              border-top: .01rem solid #f5f5f5
            input
              outline: none
              font-size: .3rem
              line-height: .36rem
              color: #333
              flex: 1
              padding-right: .3rem
            textarea
              outline: none
              font-size: .3rem
              line-height: .36rem
              color: #333
              flex: 1
              padding-right: .4rem
            .iconfont
              color: #999
              font-size: .36rem
              margin: 0 .25rem 0 0
          .edit_mode_detail
            font-size: .24rem
            color: #666;
            margin-bottom: .28rem
            padding-right: .3rem
        .spans
          padding: .2rem 0
        .form_span
          display: inline-block
          background: #fff
          border: .01rem solid #f5f5f5
          border-radius: .1rem
          font-size: .28rem
          color: #666
          line-height: .58rem
          width: 1.4rem
          margin-right: .2rem
          text-align: center
          &.selected
            color: #2395ff
            background: #eef7ff
            border-color: rgba(35,149,255,.18)
        .label_wrap_tao
          width: 1.3rem
          padding: .20rem 0
          font-size: .3rem
          line-height: .48rem
          color: #333
          p
            font-weight: 700
            &:first-child
              margin-bottom: .5rem
            &.add_mode_margin
              margin-bottom: 1.12rem
    .form_button_wrap
      padding: .4rem .3rem
      display: flex
      .form_button
        background: #00d762
        text-align: center
        border-radius: .05rem
        flex: 1
        font-size: .36rem
        line-height: .36rem
        color: #fff
        padding: .25rem 0
        font-weight: 700
    .router-slid-enter-active, .router-slid-leave-active
        transition: all .4s
    .router-slid-enter, .router-slid-leave-active
        transform: translate3d(2rem, 0, 0)
        opacity: 0
</style>
